@import "../scss";
$navbar-height: 48px;
$main-color: #ff4444;
$header-height: 44px;
$ltype-height: 36px;
$stype-width: 100px;
$icon-size: 24px;
.fixed-header {
  background-color: $main-color;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: $header-height;
  line-height: $header-height;
  padding: 4px 6px;
  overflow: hidden;
}
html, body{
  width: 100%;
  height: 100%;
}
body{
  padding-top: $header-height + $ltype-height;
  padding-left: $stype-width;
  padding-bottom: $navbar-height;
}

#phone-header{
  padding-left: 40px;
}

.back-icon {
  position: absolute;
  left: 18px;
  top: 0;
  a{
    color:white;
    outline-style: none;
    font-size:$icon-size;
  }
}

.full-modal {
  width: 100% !important;
  left: 0 !important;
  margin-left: 0 !important;
}

.ltypes{
  padding: 0 32px;
  @include fix;
  top: $header-height;
  height: $ltype-height;
  border-bottom: 1px solid #eee;
  background-color: #fff;
}
.swiper-container {
  width: 100%;
  height: $ltype-height;
  overflow: hidden;
  .swiper-slide {
    padding-top: 3px;
    text-align: center;
    &.active {
      border-bottom: 3px solid $main-color;
    }
  }
}
.ltypes-btn{
  position: absolute;
  top:0;
  width: 100%;
  left: 0;
  font-size: 18px;
  & > div {
    width: 32px;
    height: 100%;
    text-align: center;
  }
}
.stypes{
  @include fix;
  top: $header-height + $ltype-height;
  bottom: $navbar-height;
  width: $stype-width;
  background-color: #ddd;
  overflow-y: auto;
  overflow-x: hidden;
  ul {
    list-style: none;
    li {
      line-height: 36px;
      font-size: 14px;
      padding-left: 8px;
      background-color: inherit;
      color: #444;
      &.active {
        background-color: $main-color;
        color: #fff;
      }
    }
  }
}

.goods-area{
  width: 100%;
  height: 100%;
  overflow: auto;
  .goods-item{
    position: relative;
    border-bottom: 1px solid #d7d7d7;
    $goods-item-right-width: 100px;
    &-left {
      display: block;
      margin-right: $goods-item-right-width;
      color: #444;
      &:hover{
        color: #444;
      }
      h3 {
        font-weight:bold;
      }
      > * {
        margin: 4px 0;
      }
    }
    &-brief {
      color: #888;
    }
    &-right{
      $goods-item-right-height: 109px;
      position: absolute;
      right: 0;
      width: $goods-item-right-width;
      text-align: center;
      top: 50%;
      margin-top: - ($goods-item-right-height/2);
      img{
        $goods-img-size : 78px;
        width: $goods-img-size;
        height: $goods-img-size;
      }
      input {
        width: 48px;
        height: 24px;
        line-height: 24px;
        border: none;
        text-align: center;
        &:focus, &:hover{
          border: none;
          outline: none;
        }
      }
      .counter {
        margin-top: 6px;
        .btn{
          font-size: 24px;
          line-height: 24px;
          margin: 0 2px;
        }
      }
    }
  }
}

.clearfix{
  clear:both;
}

.shopping-area{
  height:$navbar-height;
  width:100%;
  position:fixed;
  bottom:0;
  left:0;
  z-index:1000;
  line-height:$navbar-height;
  background-color: #efefef;
  border:{
    style:solid;
    width:1px 0 0 0;
    color:grey;
  }

  &-icon{
    position:relative;
    left:10%;
    bottom:14px;
    height:$navbar-height;
    width:50px;
    border-radius: 50% 50% 50% 50%;
    padding:0 0 0 5px;
    background-color: grey;
  }


  &-price{
    position:fixed;
    height:$navbar-height;
    left:30%;
    bottom:0;
    font-size:1.6rem;
    line-height: $navbar-height;
    color:grey;
  }


  &-btn{
    line-height:$navbar-height;
    font-size:1.6rem;
    position:fixed;
    right:0;
    bottom:0;
    background-color: grey;
    color:white;
    height:$navbar-height;
    width:25%;
    text-align:center;
  }
}


.bgcolor-red{
  color:white;
  background-color: red;
}

.color-red{
  color:red;
}